<template>
	<div class="dl-row-sb class-box mar-bottom">
		<div class="left note-box" v-loading="loading" v-cloak>
			<div v-if="data.length>0">
				<div style="height: 35px;line-height: 35px;font-size: 15px;color: #606266;text-align: right;">
					<el-switch v-model="isSelf" @change="findSelfData"></el-switch> &nbsp;仅查看自己的
				</div>
				<div v-for="(item,index) in data" :key="index" class="item">
					<div class="dl-row-sb center">
						<!-- <div>
						 <span>课程：</span>
						 <span>{{item.courseName}}</span>
					   </div> -->
						<div style="font-weight: 500;">
							<span>对应章节：</span>
							<span>{{item.chapterName}}</span>
						</div>
						<div>
							<span></span>
							<span>{{item.createTime}}</span>
						</div>
					</div>
					<h3>{{item.noteContent}}</h3>
				</div>
				<el-pagination :total="total" :current-page="page + 1" style="margin-top: 8px;"
					layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
			</div>
			<div  v-if="data.length==0 && !loading" >
				<el-empty description="暂无课程笔记" :image-size="250" :image="require('../../../assets/no_data_images/no_note.png')"  class="emptyClass">
				</el-empty>
			</div>	
		</div>
		<div class="right">
			<div class="score-box dl-column center">
				<h2>课程综合评分</h2>
				<div style="font-weight: 600;">{{courseScore.score}}&nbsp;分</div>
				<el-rate v-model="courseScore.score" disabled :colors="colors">
				</el-rate>
				<el-button type="success"  @click="gradeForm()" round>我要评价</el-button>
			</div>
			<!-- <div class="dl-column center" v-if="courseChapteId">
				<el-button class="big-btn" @click="addNote">记笔记</el-button>
			</div> -->
			<course-grade-form ref="gradeFrom"></course-grade-form>
			<add-note-form ref="noteForm"></add-note-form>
		</div>
	</div>
</template>

<script>
	import initData from '@/mixins/initData'
	import courseGradeForm from './courseGradeForm.vue'
	import addNoteForm from '../classComponents/addNoteForm.vue';
	export default {
		mixins: [initData],
		components: {courseGradeForm,addNoteForm},
		props:{
			couserObj:{
				type:Object,
				default:null,
			},
			courseScore:{
				type:Object,
				default:null,
			}
		},
		data() {
			return {
				courseChapteId: this.$route.query.id,
				courseId: this.$route.query.courseId,
				loading:false,
				isSelf:false,
				rateNum: 4,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900']
			}
		},
		created() {
			this.$nextTick(() => {
				this.init()
			})
		},
		methods: {
			beforeInit() {
				this.url = 'web/note/page-list-pc'
				this.params = {
					page: this.page,
					size: this.size,
					self: this.isSelf, //看全部笔记
					isPublic: 1,//公开
					courseId: this.courseId
				}
				return true
			},
			findSelfData(){
				this.init()
			},
			gradeForm(){
				this.$refs.gradeFrom.dialog = true
				this.$refs.gradeFrom.form.courseId = this.couserObj.id
			},
			addNote(){
				this.$refs.noteForm.dialog = true
				this.$refs.noteForm.form.courseId = this.couserObj.id
				this.$refs.noteForm.form.courseName = this.couserObj.courseName
				this.$refs.noteForm.form.chapterId = this.courseChapteId
			}
		}
	}
</script>

<style lang="scss" scoped>
	.emptyClass{
		height: calc(100vh - 594px);
	}
	.class-box{
		min-height: calc(100vh - 594px);
	}
</style>
